<template>
  <div class="page">
    <div class="header">
      <van-nav-bar title="Mine" />
    </div>
    <div class="name-box">
      <div class="name-box-lf">
        <img
          class="avatar-img"
          src="../../assets/images/personal/avatar.png"
          alt=""
        />
      </div>
      <div class="name-box-rg">
        <div>
          <span class="name-text">{{ nickName }}</span>
          <img
            @click="showEditNickname = true"
            class="edit-img"
            src="../../assets/images/personal/edit.png"
            alt=""
          />
        </div>
        <div class="mail-text">{{ userInfo.userName }}</div>
      </div>
    </div>
    <div class="main-item1">
      <div class="money-box">
        <div class="money-box-lf">
          <img
            class="money-box-head-img"
            src="../../assets/images/personal/ad.png"
            alt=""
          />
          <div>
            <div class="money-box-head-text">
              {{ userInfo.actived ? userInfo.actived : 0 }}
            </div>
            <div class="money-box-type">Actived Ad</div>
          </div>
        </div>
        <div class="money-box-rg">
          <img
            class="money-box-head-img"
            src="../../assets/images/personal/money.png"
            alt=""
          />
          <div>
            <div class="money-box-head-text">
              {{ userInfo.balance ? userInfo.balance : 0 }}
            </div>
            <div class="money-box-type">Ad balance</div>
          </div>
        </div>
      </div>

      <div class="line"></div>

      <div class="recharge-item-box" @click="showRecharge = !showRecharge">
        <div class="recharge-item-lf">
          <div class="recharge-item-flex">
            <img
              class="wallet-img"
              src="../../assets/images/personal/wallet.png"
              alt=""
            />
            <span class="recharge-text">Recharge</span>
          </div>
        </div>
        <div class="recharge-item-rg">
          <img
            v-show="!showRecharge"
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
          <img
            v-show="showRecharge"
            class="top-icon-img"
            src="../../assets/images/personal/top-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="recharge-box" v-show="showRecharge">
        <div class="recharge-flex-box">
          <div
            class="recharge-item"
            :class="{ activeRechargeBg: checked == item.dictSort }"
            v-for="item in balanceList"
            :key="item.dictSort"
            @click="checkedMoney(item)"
          >
            <div class="recharge-money">$ {{ item.dictLabel }}</div>
            <!-- <div class="recharge-btc">BTC：0.2335458</div> -->
          </div>
        </div>
        <div>
          <van-field
            class="money-inp"
            v-model="money"
            placeholder="Please enter amount"
          />
        </div>
        <div class="confirm-btn-box" @click="handleRecharge">
          <van-button class="confirm-btn">Confirm recharge</van-button>
        </div>
      </div>
    </div>

    <div class="line"></div>

    <!--    <div class="recharge-item-box" @click="showRecharge = !showRecharge">-->
    <!--      <div class="recharge-item-lf">-->
    <!--        <div class="recharge-item-flex">-->
    <!--          <img-->
    <!--              class="wallet-img"-->
    <!--              src="../../assets/images/personal/privacy.png"-->
    <!--              alt=""-->
    <!--          />-->
    <!--          <span class="recharge-text">测试</span>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="recharge-item-rg">-->
    <!--        <img-->
    <!--            v-show="!showRecharge"-->
    <!--            class="right-icon-img"-->
    <!--            src="../../assets/images/personal/right-icon.png"-->
    <!--            alt=""-->
    <!--        />-->
    <!--        <img-->
    <!--            v-show="showRecharge"-->
    <!--            class="top-icon-img"-->
    <!--            src="../../assets/images/personal/top-icon.png"-->
    <!--            alt=""-->
    <!--        />-->
    <!--      </div>-->
    <!--    </div>-->

    <div class="bg-div"></div>

    <div class="main-item2">
      <div class="cash-item-box" @click="toggleShow">
        <div class="recharge-item-lf">
          <div class="recharge-item-flex">
            <img
              class="wallet-img"
              src="../../assets/images/personal/gift.png"
              alt=""
            />
            <span class="recharge-text">Sign in and collect cash</span>
          </div>
        </div>
        <div class="recharge-item-rg">
          <img
            v-if="!showCollapse"
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
          <img
            v-else
            class="top-icon-img"
            src="../../assets/images/personal/top-icon.png"
            alt=""
          />
        </div>
      </div>
      <div v-if="showCollapse" class="sign-content">
        <p class="tips tips1">
          Open the abcd69.com webpage every day to sign in and receive cash
          rewards that can be used for free advertising.
        </p>
        <p class="tips tips2">Daily check-in to collect cash</p>
        <div class="sign-view">
          <p>{{ 'My Rewards $' + myRewards }}</p>
          <div class="sign-show">
            <div
              v-for="(item, index) in signList"
              :key="index"
              class="sign-show-content"
            >
              <div>{{ item.money }}</div>
              <div>{{ item.order }}</div>
              <div class="sign-show-list">
                <van-checkbox
                  v-model="item.hasSign"
                  icon-size="24px"
                  disabled
                ></van-checkbox>
              </div>
            </div>
          </div>
          <van-button class="confirm-btn" @click="goSignIn"
            >Click to sign in</van-button
          >
        </div>
        <div class="sign-rules">
          <div class="sign-rules-head">
            <span>Task rewards</span>
            <span>rule</span>
          </div>
          <div class="task-list">
            <div
              v-for="(item, index) in taskList"
              :key="index"
              class="task-content"
              @click="getTask(item)"
            >
              <div class="task-item">
                <div class="task-item-head">
                  <span>Obtaining conditions</span
                  ><span>{{ item.taskStatus }}</span>
                </div>
                <div class="task-item-foot">
                  <div class="task-item-foot-left">
                    <span>{{ item.conditions }}</span
                    ><span>EXP</span>
                  </div>
                  <div class="task-item-foot-right">
                    <img
                      v-if="item.taskStatus !== 'unclaimed'"
                      class="menu-item-img"
                      src="../../assets/images/personal/task.png"
                      alt=""
                    />
                    <span class="received-money">{{ item.rewardsMoney }}</span>
                    <span>{{ item.status }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--      <div class="num-box">-->
      <!--        <div class="num-box-text">-->
      <!--          Invite a new user to visit our website to get the X dollars reward-->
      <!--        </div>-->
      <!--        <div class="num-box-text">You can invite multiple new users.</div>-->
      <!--        <div class="num-box-text">The reward can be used for publish ads.</div>-->
      <!--        <div class="num-flex-box">-->
      <!--          <div class="num-flex-item">-->
      <!--            <div class="num-flex-item-title">Invited amount</div>-->
      <!--            <div class="num-flex-item-num">-->
      <!--              {{ userInfo.invitedAmount ? userInfo.invitedAmount : 0 }}-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="num-flex-item">-->
      <!--            <div class="num-flex-item-title">Advertiser</div>-->
      <!--            <div class="num-flex-item-num">-->
      <!--              {{ userInfo.advertiser ? userInfo.advertiser : 0 }}-->
      <!--            </div>-->
      <!--          </div>-->
      <!--          <div class="num-flex-item">-->
      <!--            <div class="num-flex-item-title">Reward amount</div>-->
      <!--            <div class="num-flex-item-num">＄：15</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="num-box-text">Send your invitation link to new user</div>-->
      <!--        <div class="address-box">-->
      <!--          <div class="address-box-lf">{{ invite_link }}</div>-->
      <!--          <div class="address-box-rg" @click="copyLink">copy address</div>-->
      <!--        </div>-->
      <!--        <div class="num-box-text">-->
      <!--          If new user visit our website,you can get the X dollars reward, each-->
      <!--          user can only invite once-->
      <!--        </div>-->
      <!--      </div>-->
    </div>

    <div class="bg-div"></div>

    <div class="main-item2">
      <div class="cash-item-box" @click="toggleShow1">
        <div class="recharge-item-lf">
          <div class="recharge-item-flex">
            <img
              class="wallet-img"
              src="../../assets/images/personal/cash.png"
              alt=""
            />
            <span class="recharge-text">Cash reward promotion</span>
          </div>
        </div>
        <div class="recharge-item-rg">
          <img
            v-if="!showCollapse1"
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
          <img
            v-else
            class="top-icon-img"
            src="../../assets/images/personal/top-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="num-box" v-show="showCollapse1">
        <div class="num-box-text">
          Invite a new user to visit our website to get the X dollars reward
        </div>
        <div class="num-box-text">You can invite multiple new users.</div>
        <div class="num-box-text">The reward can be used for publish ads.</div>
        <div class="num-flex-box">
          <div class="num-flex-item">
            <div class="num-flex-item-title">Invited amount</div>
            <div class="num-flex-item-num">
              {{ userInfo.invitedAmount ? userInfo.invitedAmount : 0 }}
            </div>
          </div>
          <div class="num-flex-item">
            <div class="num-flex-item-title">Advertiser</div>
            <div class="num-flex-item-num">
              {{ userInfo.advertiser ? userInfo.advertiser : 0 }}
            </div>
          </div>
          <div class="num-flex-item">
            <div class="num-flex-item-title">Reward amount</div>
            <div class="num-flex-item-num">＄：15</div>
          </div>
        </div>
        <div class="num-box-text">Send your invitation link to new user</div>
        <div class="address-box">
          <div class="address-box-lf">{{ invite_link }}</div>
          <div class="address-box-rg" @click="copyLink">copy address</div>
        </div>
        <div class="num-box-text">
          If new user visit our website,you can get the X dollars reward, each
          user can only invite once
        </div>
      </div>
    </div>

    <div class="bg-div"></div>

    <div class="main-item3">
      <div class="menu-item" @click="handleChangePassword">
        <div class="menu-item-lf">
          <div class="menu-item-flex">
            <img
              class="menu-item-img"
              src="../../assets/images/personal/lock.png"
              alt=""
            />
            <div class="menu-item-title">change password</div>
          </div>
        </div>
        <div class="menu-item-rg">
          <img
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="menu-item" @click="handleChangeEmail">
        <div class="menu-item-lf">
          <div class="menu-item-flex">
            <img
              class="menu-item-img"
              src="../../assets/images/personal/mail.png"
              alt=""
            />
            <div class="menu-item-title">change email</div>
          </div>
        </div>
        <div class="menu-item-rg">
          <img
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="menu-item" @click="showPrivacyPopup">
        <div class="menu-item-lf">
          <div class="menu-item-flex">
            <img
              class="menu-item-img"
              src="../../assets/images/personal/privacy.png"
              alt=""
            />
            <div class="menu-item-title">privacy</div>
          </div>
        </div>
        <div class="menu-item-rg">
          <img
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="menu-item" @click="showContactPopup">
        <div class="menu-item-lf">
          <div class="menu-item-flex">
            <img
              class="menu-item-img"
              src="../../assets/images/personal/kefu.png"
              alt=""
            />
            <div class="menu-item-title">contact us</div>
          </div>
        </div>
        <div class="menu-item-rg">
          <img
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
        </div>
      </div>
      <div class="menu-item" @click="handleLogout">
        <div class="menu-item-lf">
          <div class="menu-item-flex">
            <img
              class="menu-item-img"
              src="../../assets/images/personal/logout.png"
              alt=""
            />
            <div class="menu-item-title">logout</div>
          </div>
        </div>
        <div class="menu-item-rg">
          <img
            class="right-icon-img"
            src="../../assets/images/personal/right-icon.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <van-popup v-model="showPrivacy">
      <div class="popup-box">
        <div class="popup-head">privacy</div>
        <img
          @click="showPrivacy = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          {{ privacyStatement }}
        </div>
        <div class="confirm-btn" @click="showPrivacy = false">confirm</div>
      </div>
    </van-popup>

    <van-popup v-model="showContact">
      <div class="popup-box">
        <div class="popup-head">contact us</div>
        <img
          @click="showContact = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content">
          {{ contactUs }}
        </div>
        <div class="confirm-btn" @click="showContact = false">confirm</div>
      </div>
    </van-popup>

    <van-popup v-model="showEditNickname">
      <div class="popup-box">
        <div class="popup-head">修改昵称</div>
        <img
          @click="showEditNickname = false"
          class="close-icon"
          src="../../assets/images/close-icon.png"
          alt=""
        />
        <div class="content nickName-content">
          <van-field v-model="nickName" />
        </div>
        <div class="confirm-btn" @click="handleEditNickname">confirm</div>
      </div>
    </van-popup>

    <router-view />
    <van-tabbar route active-color="#027AFC" inactive-color="#666666">
      <van-tabbar-item replace to="/vip">
        <span> {{ $t('vip') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active1 : icon.inactive1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/">
        <span> {{ $t('home') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active2 : icon.inactive2" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/postAd">
        <span> {{ $t('post AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active3 : icon.inactive3" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/myAD">
        <span> {{ $t('my AD') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active4 : icon.inactive4" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/personal">
        <span> {{ $t('profile') }} </span>
        <template #icon="props">
          <img :src="props.active ? icon.active5 : icon.inactive5" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import {
  apiGetPrivacyStatement,
  apiGetContactUs,
  apiGetLogout,
  apiGetInfo,
  apiUpdateUser,
  apiBalance,
  apiRecharge,
  apiSignDays,
} from '../../request/api'
export default {
  name: 'personal',
  components: {},
  data() {
    return {
      active: 0,
      icon: {
        active1: require('../../assets/images/tabbar/tabbar1.png'),
        inactive1: require('../../assets/images/tabbar/tabbar2.png'),
        active2: require('../../assets/images/tabbar/tabbar3.png'),
        inactive2: require('../../assets/images/tabbar/tabbar4.png'),
        active3: require('../../assets/images/tabbar/tabbar5.png'),
        inactive3: require('../../assets/images/tabbar/tabbar6.png'),
        active4: require('../../assets/images/tabbar/tabbar7.png'),
        inactive4: require('../../assets/images/tabbar/tabbar8.png'),
        active5: require('../../assets/images/tabbar/tabbar9.png'),
        inactive5: require('../../assets/images/tabbar/tabbar10.png'),
      },
      showRecharge: false,
      checked: '',
      money: '',
      showPrivacy: false,
      showContact: false,
      privacyStatement: '',
      contactUs: '',
      // 用户信息
      nickName: '123',
      userId: '',
      // invite_link: "https://sdfasdg:205511",
      invite_link: 'http://app.abcd69.com/detail?advertisementId=',
      userInfo: {},
      showEditNickname: false,
      balanceList: [],
      showCollapse: true,
      showCollapse1: true,
      myRewards: 0,
      signStatus: false,
      signdays: 0,
      signList: [
        { ind: 1, order: '1st', hasSign: true, money: '$15' },
        { ind: 2, order: '2nd', money: '$5' },
        { ind: 3, order: '3rd', money: '$10' },
        { ind: 4, order: '4th', money: '$15' },
        { ind: 5, order: '5th', money: '$25' },
        { ind: 6, order: '6th', money: '$45' },
        { ind: 7, order: '7th', money: '$60' },
      ],
      taskList: [
        {
          name: '任务1',
          taskStatus: 'unclaimed',
          status: 'received',
          conditions: 'Recharge discount, recharge $50 to 99$',
          rewardsMoney: '$129',
        },
        {
          name: '任务1',
          taskStatus: 'incomplete',
          status: '',
          conditions: 'Post 1 advertisement and receive a $50 cash reward',
          rewardsMoney: '$50',
        },
        {
          name: '任务1',
          taskStatus: 'incomplete',
          status: '',
          conditions:
            'Complete the recommended advertising upgrade and receive a cash reward of $40',
          rewardsMoney: '$40',
        },
        {
          name: '任务1',
          taskStatus: 'incomplete',
          status: '',
          conditions:
            'Complete the top advertising upgrade and receive a cash reward of $40',
          rewardsMoney: '$40',
        },
      ],
    }
  },
  created() {
    let token = localStorage.getItem('key')
    if (!token) {
      this.$router.replace('/login')
    }
    apiGetInfo().then((res) => {
      if (res.code == 200) {
        this.userInfo = res.data
        this.userId = res.data.userId
        this.nickName = res.data.nickName
        this.signdays = res.data.signdays
        this.myRewards = res.data.myRewards
        this.signList.map((x) => {
          if (x.ind <= this.signdays) {
            x.hasSign = true
          } else {
            x.hasSign = false
          }
          return x
        })
      }
    })
    apiBalance().then((res) => {
      if (res.code == 200) {
        this.balanceList = res.data
      }
    })
  },
  mounted() {},
  methods: {
    // 充值
    handleRecharge() {
      apiRecharge({
        rechargeMoney: this.money,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg)
        } else {
          this.$toast.fail(res.msg)
        }
        this.showRecharge = false
      })
    },
    checkedMoney(item) {
      this.checked = item.dictSort
      this.money = item.dictValue
    },
    copyLink() {
      let invite_link = this.invite_link + this.userId + '&isShare=1'
      this.$copyText(invite_link).then(
        (e) => {
          this.$toast.success(this.$t('复制成功'))
        },
        (err) => {
          this.$toast.fail(this.$t('复制失败'))
        }
      )
    },
    showPrivacyPopup() {
      apiGetPrivacyStatement().then((res) => {
        if (res.code == 200) {
          this.showPrivacy = true
          this.privacyStatement = res.data
        }
      })
    },
    showContactPopup() {
      apiGetContactUs().then((res) => {
        if (res.code == 200) {
          this.showContact = true
          this.contactUs = res.data
        }
      })
    },

    handleEditNickname() {
      apiUpdateUser({
        userId: this.userId,
        nickName: this.nickName,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg)
        } else {
          this.$toast.fail(res.msg)
        }
        this.showEditNickname = false
      })
    },

    handleLogout() {
      this.$dialog
        .confirm({
          title: this.$t('提示'),
          message: this.$t('确认退出吗？'),
        })
        .then(() => {
          apiGetLogout().then((res) => {
            if (res.code == 200) {
              localStorage.removeItem('key')
              this.$router.replace('/login')
              this.$toast.success(res.msg)
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    handleChangePassword() {
      this.$router.push('/changePassword')
    },
    handleChangeEmail() {
      this.$router.push('/changeMail')
    },
    toggleShow() {
      this.showCollapse = !this.showCollapse
    },
    goSignIn() {
      if (this.signStatus) return
      let token = localStorage.getItem('key')
      apiSignDays({ Authorization: token })
        .then((res) => {
          if (res.code === 200) {
            this.$toast.success(res.msg)
            this.signStatus = true
          }
        })
        .then(() => {
          apiGetInfo().then((res) => {
            if (res.code == 200) {
              this.userInfo = res.data
              this.userId = res.data.userId
              this.nickName = res.data.nickName
              this.signdays = res.data.signdays
              this.myRewards = res.data.myRewards
              this.signList.map((x) => {
                if (x.ind <= this.signdays) {
                  x.hasSign = true
                } else {
                  x.hasSign = false
                }
                return x
              })
            }
          })
        })
    },
    getTask(item) {
      console.log(item, '--------')
      this.$toast.success({
        message: 'Successfully claimed',
        position: 'top',
      })
    },
    toggleShow1() {
      this.showCollapse1 = !this.showCollapse1
    },
  },
}
</script>

<style lang="scss" scoped>
.name-box {
  box-shadow: 0px 2px 6px 1px rgba(71, 71, 71, 0.16);
  height: 162px;
  display: flex;
  align-items: center;
  justify-content: center;

  .name-box-lf {
    margin-right: 17px;
  }

  .avatar-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }

  .name-text {
    color: #273458;
    font-weight: 400;
    margin-right: 13px;
    font-size: 36px;
  }

  .edit-img {
    width: 26px;
    height: 26px;
  }

  .mail-text {
    font-size: 28px;
    font-weight: 400;
    color: #273458;
  }
}

.main-item1 {
  padding: 0 30px;

  .money-box {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .money-box-lf {
      margin-right: 20px;
      padding: 0px 28px;
      border: 1px solid #3d4c76;
      box-sizing: border-box;
      height: 106px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .money-box-head-text {
        font-size: 32px;
        font-weight: 400;
        color: #273458;
        text-align: right;
      }

      .money-box-type {
        font-size: 23px;
        font-weight: 400;
        text-align: right;
        color: #273458;
      }

      .money-box-head-img {
        height: 60px;
        width: 60px;
      }
    }

    .money-box-rg {
      background: linear-gradient(90deg, #4e608f 0%, #273458 100%);
      height: 106px;
      padding: 0px 28px;
      box-shadow: inset 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
      box-sizing: border-box;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .money-box-head-text {
        font-size: 32px;
        font-weight: 400;
        text-align: right;
        color: #ffffff;
      }

      .money-box-type {
        font-size: 23px;
        font-weight: 400;
        color: #ffffff;
        text-align: right;
      }

      .money-box-head-img {
        height: 60px;
        width: 60px;
      }
    }
  }

  .line {
    height: 0px;
    opacity: 0.2;
    border: 1px solid #adadad;
  }

  .recharge-item-box {
    margin: 21px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .recharge-item-flex {
      display: flex;
      align-items: center;
    }

    .wallet-img {
      width: 33px;
      height: auto;
      margin-right: 16px;
      line-height: 35px;
    }

    .recharge-text {
      font-size: 28px;
      font-weight: bold;
      line-height: 35px;
      color: #273458;
    }

    .right-icon-img {
      width: 12px;
      height: auto;
    }

    .top-icon-img {
      height: 12px;
      width: auto;
    }
  }

  .recharge-box {
    padding: 10px 26px;

    .recharge-flex-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .recharge-item {
        width: calc(50% - 9px);
        height: 116px;
        border: 1px solid rgba(39, 52, 88, 0.27);
        background: #ffffff;
        margin-bottom: 18px;
        padding: 15px 20px;
        box-sizing: border-box;
      }

      .recharge-money {
        font-size: 29px;
        font-weight: bold;
        color: #1f1a17;
        margin-bottom: 10px;
      }

      .recharge-btc {
        font-size: 25px;
        font-weight: 400;
        color: #1f1a17;
      }

      .activeRechargeBg {
        background: #273458;

        .recharge-money {
          color: #f3f3f3;
        }

        .recharge-btc {
          color: #f3f3f3;
        }
      }
    }

    .money-inp {
      height: 90px;
      margin: 65px 0;
      background: #ffffff;
      border: 1px solid #273458;
      align-items: center;
    }

    :deep(.van-field__control) {
      font-size: 28px;
    }

    :deep(.van-field__control::placeholder) {
      text-align: center;
    }

    .confirm-btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .confirm-btn {
      margin-bottom: 50px;
      height: 90px;
      width: 408px;
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
    }
  }
}

.bg-div {
  background: #f0f0f0;
  height: 20px;
}

.main-item2 {
  padding: 0 30px;
  margin: 5px 0px;

  .sign-content {
    height: auto;
    background-color: rgb(39, 52, 86);
    border: 1px solid rgb(39, 52, 86);
    border-radius: 5px;

    .tips {
      color: #ffffff;
    }

    .tips2 {
      border-bottom: 1px solid #fff;
    }

    .sign-view {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solod #fff;

      p {
        color: #fff;
        font-size: 36px;
        margin: 20px 0px;
      }

      .sign-show {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .sign-show-content {
          width: 10%;
          height: 140px;
          margin: 5px 10px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background-color: rgba(255, 255, 255, 0.1);
          color: #fff;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          .sign-show-list {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            ::v-deep .van-checkbox__icon--checked .van-icon {
              background-color: rgb(255, 240, 202) !important;
            }
          }
        }
      }

      .confirm-btn {
        width: 60%;
        height: 90px;
        background: #273458;
        box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
        border: 1px solid #ffffff;
        border-radius: 45px;
        font-size: 26px;
        color: #ffffff;
        font-weight: 400;
        margin: 20px 0px;
      }
    }

    .sign-rules {
      color: #fff;
      font-size: 24px;
      padding: 10px;

      .sign-rules-head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .task-list {
        color: #333;

        .task-content {
          width: 100%;
          height: 140px;
          border: 1px solid rgb(255, 240, 202);
          border-radius: 5px;
          margin: 20px 0px;
          background-color: rgb(255, 240, 202);

          .task-item {
            width: 95%;
            height: 140px;
            padding: 5px 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .task-item-head {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              font-size: 30px;
            }

            .task-item-foot {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;

              .task-item-foot-left {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 50%;
                font-size: 18px;
              }

              .task-item-foot-right {
                width: 260px;
                height: 60px;
                border: 1px solid #fb5151;
                border-radius: 5px;
                background-color: #fb5151;
                color: #fff;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;

                .menu-item-img {
                  width: 64px;
                  height: auto;
                  margin-right: 32px;
                }

                span {
                  font-size: 36px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }

  .cash-item-box {
    margin: 21px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .recharge-item-flex {
      display: flex;
      align-items: center;
    }

    .wallet-img {
      width: 33px;
      height: auto;
      margin-right: 16px;
      line-height: 35px;
    }

    .recharge-text {
      font-size: 28px;
      font-weight: bold;
      line-height: 35px;
      color: #273458;
    }

    .right-icon-img {
      width: 12px;
      height: auto;
    }
    .top-icon-img {
      height: 12px;
      width: auto;
    }
  }

  .num-box {
    margin: 30px 0;
    padding: 36px;
    background-image: url('../../assets/images/personal/num-bg.png');
    background-size: cover;
    /* 调整背景图片大小以完全覆盖元素 */
    background-position: center center;
    /* 将背景图像位于元素的中心 */
    background-repeat: no-repeat;
    /* 防止图像重复 */
  }

  .num-box-text {
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
  }

  .num-flex-box {
    margin: 34px 0;
    padding: 30px 0;
    display: flex;
    align-items: center;
    border-top: 1px solid #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
  }

  .num-flex-item {
    flex: 1;
  }

  .num-flex-item-title {
    font-size: 26px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    margin-bottom: 24px;
  }

  .num-flex-item-num {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
  }

  .address-box {
    margin: 13px;
    display: flex;
    align-items: center;
  }

  .address-box-lf {
    padding: 10px 20px;
    font-size: 24px;
    font-weight: 400;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    color: #989898;
    height: 50px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }

  .address-box-rg {
    font-size: 26px;
    background: #4e5f8b;
    width: 233px;
    height: 50px;
    font-weight: 400;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f3f3f3;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #4e5f8b;
  }
}

.main-item3 {
  padding: 0 30px;
  margin-bottom: 120px;

  .menu-item {
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1e1e1;
  }

  .menu-item-flex {
    display: flex;
    align-items: center;
  }

  .menu-item-img {
    width: 32px;
    height: auto;
    margin-right: 32px;
  }

  .menu-item-title {
    font-size: 28px;
    font-weight: bold;
    color: #707070;
  }

  .menu-item:last-child {
    border-bottom: none;
  }

  .right-icon-img {
    width: 12px;
    height: auto;
  }
}

// 弹窗样式
.popup-box {
  width: 567px;
  background: #ffffff;

  .popup-head {
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    color: #232f3e;
    border-bottom: 1px solid #707070;
  }

  .close-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 35px;
    height: 35px;
  }

  .content {
    margin: 21px 35px;
    padding: 15px;
    height: 247px;
    background: #ffffff;
    border: 1px solid #c0c0c0;
    font-size: 22px;
    font-weight: 400;
    color: #000000;
  }

  .nickName-content {
    height: 100%;
  }

  .confirm-btn {
    margin: 21px 35px 35px;
    height: 70px;
    width: 498px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #ffffff;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
  }
}
</style>
